import React, { useMemo } from "react";

import MyContext from "./Context";

const ChildNum = () => {
  const { store, dispatch } = React.useContext(MyContext);

  return useMemo(() => {
    console.log("DEMO2: re-render ChildNum", store.num);
    return (
      <div className="Child-container">
        <div>num is: {store.num}</div>
        <button onClick={() => dispatch({ type: "addNum" })}> AddNum </button>
      </div>
    );
  }, [store.num, dispatch]);
};

export default ChildNum;
